<template>
	<view class="container">
		<view class="form-title" @click="ceShi">添加地址</view>
		<!-- 姓名 -->
		<view class="form-item">
			<text class="label">姓名</text>
			<input class="input" type="text" placeholder="请输入姓名" v-model="name" style="width: 92%;" />
		</view>

		<!-- 手机号 -->
		<view class="form-item">
			<text class="label">手机号</text>
			<input class="input" type="number" placeholder="请输入手机号" v-model="phoneNumber" style="width: 92%;" />
		</view>

		<!-- 省市区选择 -->
		<view class="form-item">
			<text @click="ceShi" class="label">选择省市区</text>
			<picker mode="region" :value="region" :range="regionList" @change="bindRegionChange" @click="ceShi">
				<view id="xiaoPicker" class="picker" v-if="region[0] == 0">
					{{ regionList[0][region[0]] }} {{ regionList[1][region[1]] }} {{ regionList[2][region[2]] }}
				</view>
				<view id="xiaoPicker" class="picker" v-else>
					{{region[0]}} {{ region[1] }} {{ region[2] }}
				</view>
			</picker>
		</view>

		<!-- 详细地址 -->
		<view class="form-item">
			<text class="label">详细地址</text>
			<input class="input" type="text" placeholder="请输入街道/小区/楼号" style="width: 92%;" v-model="detailedAddress" />
		</view>

		<!-- 设为默认地址 -->
		<view class="form-item">
			<checkbox :checked="isDefault" @click="handleCheckboxChange">设为默认地址</checkbox>
		</view>

		<!-- 提交按钮 -->
		<view class="form-item">
			<button class="submit-btn" @click="submitForm">提交地址</button>
		</view>
	</view>
</template>
<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'


	import {
		addressApi
	} from '@/package/api/user_address.js';
	import config from 'uview-ui/libs/config/config';
	// 测试函数
	function ceShi() {
		console.log(123 + 321);
	}

	// 定义响应式数据
	const regionList = ref([
		['广东省'],
		['广州市'],
		['天河区'],
	]);
	const region = ref([0, 0, 0]);
	const detailedAddress = ref('');
	const name = ref('');
	const phoneNumber = ref('');
	const isDefault = ref(false);

	// 处理省市区选择变化
	const bindRegionChange = (event) => {
		console.log(event);
		const value = event.detail.value;
		region.value = value;
	};

	// 处理 checkbox 点击事件
	const handleCheckboxChange = (event) => {
		// 手动更新 isDefault 的值
		isDefault.value = !isDefault.value;
		console.log('isDefault 的新值:', isDefault.value);
	};

	// 提交表单
	const submitForm = () => {
		// 验证姓名
		if (!name.value.trim()) {
			uni.showToast({
				title: '请输入姓名',
				icon: 'none',
			});
			return;
		}

		// 验证手机号
		const phoneRegex = /^1[3-9]\d{9}$/;
		if (!phoneNumber.value || !phoneRegex.test(phoneNumber.value)) {
			uni.showToast({
				title: '请输入有效的手机号',
				icon: 'none',
			});
			return;
		}

		// 验证详细地址
		if (!detailedAddress.value.trim()) {
			uni.showToast({
				title: '请输入详细地址',
				icon: 'none',
			});
			return;
		}



		// 页面加载时弹出授权弹窗
		onLoad(() => {

			// region.value[0] = '广东省';
			// region.value[1] = '广州市';
			// region.value[2] = '天河区';
			region.value = [0, 0, 0];
			console.log(region.value)


		});

		onShow(() => {
			region.value = [0, 0, 0];
			console.log(region.value)
		})

		// 提交地址信息
		const addressInfo = {
			name: name.value,
			phoneNumber: phoneNumber.value,
			province: region.value[0],
			city: region.value[1],
			district: region.value[2],
			detailedAddress: detailedAddress.value,
			isDefault: isDefault.value ? 1 : 0 // 将布尔值转换为 1 或 0
		};

		// 将对象转换为 JSON 格式的字符串
		const addressInfoJson = JSON.stringify(addressInfo, null, 2); // 使用缩进格
		// 打印提交信息
		console.log('提交的地址信息:', addressInfoJson);
		if (region.value[0] == 0) {
			console.log("--------------")
			addressInfo.province = '广东省';
			addressInfo.city = '广州市';
			addressInfo.district = '天河区';

		}
		console.log('提交的地址信息:', region.value);

		// 发送请求
		addressApi.add(addressInfoJson).then((res) => {
			console.log('请求成功', res);
			uni.showToast({
				title: '地址保存成功',
				icon: 'success'
			});
			// 更新本地存储中的数据
			let storedAddressList = uni.getStorageSync('addressManagement');

			if (storedAddressList == null || storedAddressList == "") {
				storedAddressList = [];
			}

			// 判断是否为true
			if (isDefault.value) {
				storedAddressList.forEach(address => {
					address.isDefault = 0;
				});

			}

			// 将新地址添加到数组中
			storedAddressList.push(addressInfo);
			addressInfo.id = res.data

			// 再存向本地存储
			uni.setStorageSync('addressManagement', storedAddressList);


			// 将表单数据进行清空
			// 清空和初始化表单数据
			name.value = '';
			phoneNumber.value = '';
			region.value = [0, 0, 0];
			detailedAddress.value = '';
			isDefault.value = false;




		}).catch((err) => {
			console.error('请求失败', err);
			uni.showToast({
				title: '地址保存失败',
				icon: 'none'
			});
		});
	};
</script>

<style scoped>
	.container {
		padding: 20px;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.form-title {
		font-size: 24px;
		font-weight: bold;
		color: #333;
		margin-bottom: 20px;
		text-align: center;
	}

	.form-item {
		margin-bottom: 20px;
	}

	.label {
		font-size: 16px;
		color: #666;
		display: block;
		margin-bottom: 5px;
	}

	.picker {
		padding: 12px;
		border: 1px solid #ddd;
		border-radius: 8px;
		background-color: #fff;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	}

	.input {
		width: 100%;
		padding: 12px;
		margin-top: 5px;
		border: 1px solid #ddd;
		border-radius: 8px;
		background-color: #fff;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
		font-size: 16px;
	}

	.submit-btn {
		width: 100%;
		background-color: #007aff;
		color: #fff;
		border: none;
		border-radius: 8px;
		font-size: 18px;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	.submit-btn:hover {
		background-color: #0056b3;
	}
</style>